<template>
  <div class="table">
    <UserTableColumn
      v-for="item in TestData"
      :key="item.username"
      :username="item.username"
      :tokens="item.count"
      :role="item.level"
    />
  </div>
  <div class="footer">
    <ArrowLeft
      class="arrow"
      @click="left"
    />
    <div class="page">{{page}}</div>
    <ArrowRight
      class="arrow"
      @click="right"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { getUsers } from "../../api/api";
import UserTableColumn from "./UserTableColumn.vue";

const TestData = reactive([]);
const page = ref(1);

onMounted(() => {
  getUsers(1, 8).then((res) => {
    console.log(res);
    res.forEach((element) => {
      TestData.push(element);
    });
  });
});

function left() {
  if (page.value == 1) return;
  page.value = page.value - 1;
  updateUsers()
  console.log(page.value);
}

function right() {
  if(TestData.length == 0){
    return
  }
  page.value = page.value + 1;
  updateUsers()
  console.log(page.value);
}
async function updateUsers() {
  try {
    getUsers(page.value, 8).then((res) => {
      TestData.length = 0;
      res.forEach((element) => {
        TestData.push(element);
      });
    });
  } catch (error) {
    alert("error")
  }
}
</script>

<style scope>
.table {
  width: 95%;
  height: max-content;
  margin: auto;
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-self: center;
}
.footer {
  width: 100px;
  position: absolute;
  right: 20px;
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow {
  width: 30px;
  height: 30px;
  background-color: var(--left-black);
  border-radius: 10px;
  color: white;
}
.arrow:active {
  border: 2px solid white;
}
.page {
  font-size: 20px;
  font-weight: 700;
  user-select: none;
}
</style>